<template>
  <div class="sson">
    <aside>
        <form action="" @submit.prevent="postS()">
        <img src="../assets/touxiang.jpeg" alt="">
        <input class="i1" type="text" placeholder="请输入传给父组件的内容" v-model.lazy.trim='txtS' required/>
        <input class="i2" type="submit" value="提交">
        </form>
        <hr>
        <hr>
        <h3>从父组件传递过来的信息</h3>
         <ul>
            <li v-for="item in sonmsg" :key="item">Jhon:{{item}}</li>
         </ul>
        </aside>
  </div>
</template>

<script setup>
defineProps(['sonmsg']);
import { ref } from "vue";
// const emits = defineEmits(['sendtxt'])
const emits = defineEmits({
    // 对sendtxt事件中所有函数参数做非空验证
    sendtxt : (val)=>{
        if (val != '' && val !='123') {
            return true;
        }else{
            console.log('不可向父组件传递一个空数据或传递123');
            return false;
        }
    }
})
let txtS  = ref('');//发送给父组件的数据

// 提交事件
const postS = ()=>{
    //emits('自定义函数'，子组件的数据)
    //emits/this.$emit()为捆绑出发：在触发当前提交事件的同时也会出发另一个函数sendtxt事件
    emits('sendtxt',txtS.value);
    txtS.value = '';
}
</script>

<style scoped>
.sson{
    width: 80%;
    margin: 20px auto;
    border: 0;
}
.sson ul{
    list-style: none;
}

.sson h3,
.sson li{
    color: darkcyan;
}

.sson img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
}
.sson form{
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.sson aside .i1{
    line-height: 65px;
    width: 300px;
    border-radius: 8px;
    border:  1px solid dimgrey;
}
.sson aside .i2{
    height: 65px;
    width: 70px;
    border-radius: 8px;
    background-color: darkcyan;
    color: white;
    border: 0;
}
</style>